<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/libpannellum.js"></script>
    <script src="./js/pannellum.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="./css/pannellum.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        html {
            font-size: 13.33333333333333333333333vw;
        }

        body {
            font-size: 24px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .pnlm-hotspot {}

        .pnlm-hotspot:hover {
            background-color: blueviolet;
        }

        #panorama {
            width: 100vw;
            height: 100vh;
        }

        .aaa {
            height: .3rem;
            width: .3rem;
            /* background: rgba(0, 0, 0, .5); */
            color: #fff;
            font-size: 16px;
        }

        .aaa::after {
            content: "";
            display: flex;
            height: .3rem;
            width: .3rem;
            /* background-color: pink; */
            background-image: url('./img/dibiao.png');
            background-size: 100%;
        }

        .bbb {
            width: 20px;
            height: 20px;
            background-color: skyblue;
            border-radius: 50%;
        }

        /* 添加音频播放器外层盒子的类 */
        .audioClass {
            background-color: red !important;
        }
        .video {
            width: .8rem;
            height: auto;
        }
    </style>
</head>

<body>
    
    <div id="app">
        <!-- <transition name="fade"> -->
        <div class="show" v-if='show' @click.stop='showClick'>
            <div id="showBox">
                <img style="width: .5rem; height: .5rem;" :src="imgUrl + showData.industryResourceImg" alt="">
                <video controls class="video"  :src="imgUrl + showData.industryResourceVideo"></video>
                <audio controls :src="imgUrl + showData.industryResourceAudioPath"></audio>
            </div>
        </div>
        <!-- </transition>   -->


        <div id="panorama"></div>
        <div class="imgList">
            <div class="img " :class="{imgActive: (index+1) == tabIndex}" v-for="(value,key,index) in scenesOption"
                @click="imgClick(key,index)">
                <img :src="value.panorama" alt="">

            </div>
            <div class="open" @click='open'>
                展</div>
    </div>
    <script>
        var qs = Qs 
        let as = qs.stringify({
            Eid: 1
        })
        console.log('as', as);
        let app = new Vue({

            el: "#app",
            data: function () {
                return {
                    imgUrl :'http://192.168.179.101/padProject-0.0.1-SNAPSHOT/resource/',
                    flag: false,
                    show: false,
                    showData: '',
                    tabIndex: 1,
                    panoramadata: '',
                    scenesOption: {},
                    imgArr: []
                }
            },
            mounted() {
                // this.render(this.scenesOption)

                setTimeout(() => {

                }, 500)
            },
            created() {
                this.getData()
                let url = this.serilizeUrl(window.location.href)
                console.log('url', url);
            },
            methods: {
                showClick(e) {
                    if (e.target.className === 'show') {
                        this.show = false
                    }
                },
                //接口
                getData() {
                    axios({
                        url: 'http://192.168.179.101/padProject-0.0.1-SNAPSHOT/themeExhibition/queryExhibition', // 路径
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: as
                    }).then((res) => {

                        let option = {}

                        let data = res.data.data

                        let hotData = data.mdThIndustryExhibitList

                        console.log('----------场景配置----------');
                        let Arr = []
                        Arr[0] = {
                            "titie": '第一个场景',
                            "type": "equirectangular",
                            "panorama": this.imgUrl + data.industryExhibit,  
                            // "panorama": 'http://118.178.180.190:8080/webapp/resource/article/richResource/TH_20210330145935raNSk.jpg',
                            // "panorama": './img/aaa.jpg',
                            // "panorama": 'C:/Users/renjian/Desktop/xuexi/pannellum/img/aaa.jpg',
                            "hotSpots": []
                        }

                        console.log('----------主场景热点数据操作----------');
                        hotData.forEach((item, index) => {
                            let obj = {}

                            obj.pitch = -10
                            obj.yaw = 100
                            obj.type = 'scene'
                            obj.sceneId = `scenes${index + 2}`
                            obj.text = item.industryName
                            obj.cssClass = 'aaa'
                            Arr[0].hotSpots.push(obj)
                            console.log('主场景热点', Arr[0].hotSpots);

                        })
//
                        hotData.forEach((item, index) => {
                            let obj = {}
                            obj.titie = `第${index + 2}个场景`
                            obj.type = "equirectangular"
                            obj.panorama = this.imgUrl + item.companyLocationImg
                            // obj.panorama = 'http://118.178.180.190:8080/webapp/resource/article/richResource/TH_2021033015153914un6.jpg'
                            obj.hotSpots = []

                            item.thIndustryResourceList.forEach((item2) => {
                                console.log('资源热点', item2);
                                let itemHotObj = {}
                                itemHotObj.pitch = 12
                                itemHotObj.yaw = 170
                                itemHotObj.cssClass = `bbb`
                                itemHotObj.clickHandlerFunc = resourcesHotClick
                                itemHotObj.clickHandlerArgs = {
                                    data: item2
                                }

                                obj.hotSpots.push(itemHotObj)
                            })
                            item.thIndustryCompanyRelevanceList.forEach((item2) => {
                                console.log('跳转热点', item2.companyI);
                                let itemHotObj = {}
                                itemHotObj.pitch = 15
                                itemHotObj.yaw = 17
                                itemHotObj.cssClass = `bbb`
                                itemHotObj.clickHandlerFunc = callandroid
                                itemHotObj.clickHandlerArgs = {
                                    companyId: item2.companyId
                                }

                                obj.hotSpots.push(itemHotObj)
                            })

                            console.log('其他场景配置', obj);
                            Arr.push(obj)
                        })

                        this.imgArr = Arr

                        console.log(this.imgArr);

                        Arr.forEach((item, index) => {
                            option[`scenes${index + 1}`] = item
                        });

                        console.log('完整配置scenesOption', option);
                        this.scenesOption = option
                        this.render(option)
                    })
                },
                // 获取url
                serilizeUrl(url) {
                    var urlObject = {};
                    if (/\?/.test(url)) {
                        var urlString = url.substring(url.indexOf("?") + 1);
                        var urlArray = urlString.split("&");
                        for (var i = 0, len = urlArray.length; i < len; i++) {
                            var urlItem = urlArray[i];
                            var item = urlItem.split("=");
                            urlObject[item[0]] = item[1];
                        }
                        return urlObject;
                    }
                    return null;
                },

                imgClick(key, index) {
                    this.panoramadata.loadScene(`scenes${index + 1}`)
                    this.tabIndex = index + 1
                },
                render(scenesOption) {
                    this.panoramadata = pannellum.viewer('panorama', {
                        "firstScene": 'scenes1', //首次加载那个图片
                        // "author": "lyj",//作者
                        "sceneFadeDuration": 2500, //全景图场景切换时的持续时间
                        "autoLoad": true, //自动加载
                        "orientationOnByDefault": true, //是否开启重力感应查看全景图，默认false
                        "showControls": false, //是否显示控制按钮，默认true；
                        "autoRotate": -2, //是否自动旋转，在加载之后，全景图会水平旋转显示，负数为往右边旋转，整数为往左边旋转，值为数字类型；
                        // "autoRotateInactivityDelay": 5000,//在autoRotate设定的情况下，用户停止操作多长时间后继续自动旋转，单位为毫秒；
                        "mouseZoom": true,
                        // "minPitch": 0,
                        // "maxPitch": 0,
                        "hfov": 100,
                        "minHfov": 60,
                        "maxHfov": 120,
                        //场景，值为对象，其属性名代表着场景的id（sceneId），属性值为viewer的配置参数，其参数会覆盖默认（上述中的default对象）设置的参数；
                        "scenes": scenesOption //注 scenes 为对象
                    });
                },


                open() {
                    let imgList = document.querySelector('.imgList')
                  
                    if (this.flag) {
                        imgList.style.bottom = '-0.8rem'
                        this.flag = false
                    } else {
                        imgList.style.bottom = '0'
                        this.flag = true
                    }
                }
            },
            watch: {

            },

        })


        function callandroid(hotSpotDiv, args) {
            console.log(1111);
            // console.log(hotSpotDiv, args);
            // console.log('公司Id', args.companyId);
            JsTest.setJumpEnterprise(1)
        }

        function resourcesHotClick(hotSpotDiv, args) {
            console.log('资源热点点击');
            console.log('资源Data', args.data);
            app.showData = args.data
            app.show = true
        }

    </script>
</body>

</html>